<template>
  <transition name="mini">
    <div class="mini-player" v-show="!fullScreen" @click="showNormalPlayer">
      <div class="cd-wrapper">
        <div ref="cdRef" class="cd">
          <img
            ref="cdImageRef"
            width="40"
            height="40"
            :src="currentSong.pic"
            :class="cdCls"
          />
        </div>
      </div>
      <div class="slider-wrapper">
        <van-swipe
          ref="swipeRef"
          class="slider-group"
          :show-indicators="false"
          :initial-swipe="currentIndex"
          @change="swipeItemChange"
        >
          <van-swipe-item
            class="slider-page"
            v-for="song in playlist"
            :key="song.id"
          >
            <h2 class="name">{{ song.name }}</h2>
            <p class="desc">{{ song.singer }}</p>
          </van-swipe-item>
          <template #indicator="{ active }">
            <div class="custom-indicator">
              {{ active + 1 }}/{{ playlist.length }}
            </div>
          </template>
        </van-swipe>
      </div>
      <div class="control">
        <ProgressCircle :radius="32" :progress="progress">
          <i
            class="icon-mini"
            :class="miniPlayIcon"
            @click.stop="togglePlay"
          ></i>
        </ProgressCircle>
      </div>
      <div class="control" @click.stop="showPlaylist">
        <i class="icon-playlist"></i>
      </div>
      <!-- 歌曲列表 -->
      <Playlist ref="playlistRef"></Playlist>
      <!-- <van-popup
        class="list-wrapper"
        v-model:show="showPopup"
        position="bottom"
        overlay
        :style="{ height: '70%' }"
      >
        <div style="width:100%;height:50px;"></div>
        <div class="list-header">
          <h1 class="title">
            <i class="icon" :class="modeIcon" @click="changeMode"> </i>
            <span class="text">{{ modeText }}</span>
            <span class="clear" @click="showConfirm">
              <i class="icon-clear"></i>
            </span>
          </h1>
        </div>
        <Scroll class="list-content" ref="scrollRef">
          <transition-group name="list" tag="ul">
            <li
              class="item"
              v-for="song in sequenceList"
              :key="song.id"
              @click="selectItem(song)"
            >
              <i class="current" :class="getCurrentIcon(song)"></i>
              <span class="text">{{ song.name }}</span>
              <span class="favorite" @click.stop="toggleFavorite(song)">
                <i :class="getFavoriteIcon(song)"></i>
              </span>
              <span
                class="delete"
                @click.stop="removeSong(song)"
                :class="{ disable: removing }"
              >
                <i class="icon-delete"></i>
              </span>
            </li>
          </transition-group>
        </Scroll>
        <div style="width:100%;height:120px;"></div>
        <div class="list-add">
          <div class="add" @click="showAddSong">
            <i class="icon-add"></i>
            <span class="text">添加歌曲到队列</span>
          </div>
        </div>
        <div class="list-footer" @click="closePopup">
          关闭
        </div>
      </van-popup> -->
    </div>
  </transition>
</template>

<script>
import { useStore } from 'vuex'
import { computed, ref, watch, nextTick } from 'vue'
import useCd from './use-cd'
import ProgressCircle from './progress-circle'
import Playlist from './playlist'
import useMode from './use-mode'
import useFavorite from './use-favorite'
export default {
  name: 'mini-player',
  components: {
    Playlist,
    ProgressCircle
  },
  props: {
    progress: {
      type: Number,
      default: 0
    },
    togglePlay: Function
  },
  setup(props) {
    const visible = ref(false)
    const removing = ref(false)
    // const showPopup = ref(false) // 歌曲列表
    const playlistRef = ref(null)
    const swipeRef = ref(null)
    const store = useStore()
    const fullScreen = computed(() => store.state.fullScreen)
    const currentIndex = computed(() => store.state.currentIndex)
    const currentSong = computed(() => store.getters.currentSong)
    const playing = computed(() => store.state.playing)
    const playlist = computed(() => store.state.playlist)
    const sequenceList = computed(() => store.state.sequenceList)

    const { modeIcon, modeText, changeMode } = useMode()
    const { getFavoriteIcon, toggleFavorite } = useFavorite()

    watch(fullScreen, async newFullScreen => {
      await nextTick()
      if (!newFullScreen) {
        swipeRef.value.resize()
      }
    })

    const { cdCls, cdRef, cdImageRef } = useCd()

    const miniPlayIcon = computed(() => {
      return playing.value ? 'icon-pause-mini' : 'icon-play-mini'
    })

    function showNormalPlayer() {
      store.commit('setFullScreen', true)
    }

    function showPlaylist() {
      playlistRef.value.show()
    }

    // 滑动切换歌曲
    function swipeItemChange(index) {
      store.commit('setCurrentIndex', index)
      store.commit('setPlayingState', true)
    }

    function getCurrentIcon(song) {
      if (song.id === currentSong.value.id) {
        return 'icon-play'
      }
    }
    function hide() {
      visible.value = false
    }

    function removeSong(song) {
      if (removing.value) {
        return
      }
      removing.value = true
      store.dispatch('removeSong', song)
      if (!playlist.value.length) {
        hide()
      }
      setTimeout(() => {
        removing.value = false
      }, 300)
    }

    // function showAddSong() {
    //   addSongRef.value.show()
    // }

    return {
      // addSongRef,
      removeSong,
      removing,
      getCurrentIcon,
      sequenceList,
      // 列表
      playlistRef,
      swipeItemChange,
      fullScreen,
      currentSong,
      playlist,
      miniPlayIcon,
      showNormalPlayer,
      showPlaylist,
      // cd
      cdCls,
      cdRef,
      cdImageRef,
      currentIndex,
      swipeRef,
      modeIcon,
      modeText,
      changeMode,
      getFavoriteIcon,
      toggleFavorite
    }
  }
}
</script>

<style lang="scss" scoped>
.mini-player {
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 3000;
  width: 100%;
  height: 60px;
  background: $color-highlight-background;
  .cd-wrapper {
    // flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0 10px 0 20px;
    .cd {
      height: 100%;
      width: 100%;
      img {
        border-radius: 50%;
        &.playing {
          animation: rotate 10s linear infinite;
        }
        &.pause {
          animation-play-state: paused;
        }
      }
    }
  }
  .slider-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    line-height: 20px;
    overflow: hidden;
    .slider-group {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      .slider-page {
        display: inline-block;
        width: 100%;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        .name {
          margin-bottom: 2px;
          @include no-wrap();
          font-size: $font-size-medium;
          color: $color-text;
        }
        .desc {
          @include no-wrap();
          font-size: $font-size-small;
          color: $color-text-d;
        }
      }
      .custom-indicator {
        position: absolute;
        font-size: 14px;
        right: 5px;
        bottom: 0px;
      }
    }
  }
  .control {
    // flex: 0 0 30px;
    width: 30px;
    margin: 0 10px;
    .icon-playlist {
      position: relative;
      top: -2px;
      font-size: 30px;
      color: $color-theme-d;
    }
    .icon-mini {
      position: absolute;
      left: -1.5px;
      top: -1px;
      color: $color-theme-d;
      font-size: 32px;
    }
  }
  &.mini-enter-active,
  &.mini-leave-active {
    transition: all 0.6s cubic-bezier(0.45, 0, 0.55, 1);
  }
  &.mini-enter-from,
  &.mini-leave-to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  .list-wrapper {
    z-index: 210;
    width: 100%;
    background-color: $color-highlight-background;
    display: flex;
    flex-direction: column;
    position: relative;
    .list-header {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      padding: 20px 30px 10px 20px;
      height: 50px;
      z-index: 333;
      .title {
        display: flex;
        align-items: center;
        .icon {
          margin-right: 10px;
          font-size: 24px;
          color: $color-theme-d;
        }
        .text {
          flex: 1;
          font-size: $font-size-medium;
          color: $color-text-l;
        }
        .clear {
          @include extend-click();
          .icon-clear {
            font-size: $font-size-medium;
            color: $color-text-d;
          }
        }
      }
    }
    .list-content {
      max-height: 280px;
      overflow: hidden;
      .item {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 30px 0 20px;
        overflow: hidden;
        .current {
          flex: 0 0 20px;
          width: 20px;
          font-size: $font-size-small;
          color: $color-theme-d;
        }
        .text {
          flex: 1;
          @include no-wrap();
          font-size: $font-size-medium;
          color: $color-text-d;
        }
        .favorite {
          @include extend-click();
          margin-right: 15px;
          font-size: $font-size-small;
          color: $color-theme;
          .icon-favorite {
            color: $color-sub-theme;
          }
        }
        .delete {
          @include extend-click();
          font-size: $font-size-small;
          color: $color-theme;
          &.disable {
            color: $color-theme-d;
          }
        }
      }
    }
    .list-add {
      position: absolute;
      left: 50%;
      bottom: 70px;
      transform: translateX(-50%);
      height: 30px;
      width: 140px;
      // margin: 20px auto 70px auto;
      .add {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        border: 1px solid $color-text-l;
        border-radius: 100px;
        color: $color-text-l;
        .icon-add {
          margin-right: 5px;
          font-size: $font-size-small-s;
        }
        .text {
          font-size: $font-size-small;
        }
      }
    }
    .list-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      text-align: center;
      line-height: 50px;
      width: 100%;
      height: 50px;
      background: $color-background;
      font-size: $font-size-medium-x;
      color: $color-text-l;
    }
  }
}
</style>
